<!-- /**
* Display the information of the enterprise after completing the record submission.
*
* @author Xiong Keqin
* @since 2023-10-25
*/ -->
<template>
	<div>
		<center>
			<h1 style="margin-right:4.1666%;">企业信息</h1>
		</center>
		<div class="app-container">
			<el-form ref="form" :model="form" :rules="InfoRules">
				<el-row>
					<el-col :span="8" :offset="1">
						<el-form-item label="企业名称" prop="_z_name" label-width="100px">
							<el-input style="width:95%" v-model="form.z_name" placeholder="中文名称" :disabled=true />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-form-item label-width="100px">
							<el-input style="width:95%" v-model="form.e_name" placeholder="英文名称" :disabled=true />
							<!-- <span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span> -->
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8" :offset="1">
						<el-form-item label="组织机构代码" prop="_oid" label-width="100px">
							<el-input style="width:95%" v-model="form.organize_id" placeholder="请输入" :disabled=true />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-form-item label="邮政编码" prop="_zip_code" label-width="100px">
							<el-input style="width:95%" v-model="form.zip_code" placeholder="请输入" :disabled=true />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8" :offset="1">
						<el-form-item label="所属地区" prop="_region" label-width="100px">
							<el-cascader placeholder="请选择" v-model="form.region_value" :options="form.region_options"
								:disabled=true style="width:95%"></el-cascader>
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-form-item label="所属行业" prop="_hangye" label-width="100px">
							<el-cascader placeholder="请选择" v-model="form.hangye_value" :options="form.hangye_options"
								:disabled=true style="width:95%"></el-cascader>
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :offset="1" :span="19">
						<el-form-item label="企业性质" prop="_xingzhi" label-width="100px">
							<el-cascader placeholder="请选择" v-model="form.xingzhi_value" :options="form.xingzhi_options"
								:disabled=true style="width:98%"></el-cascader>
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :offset="1" :span="19">
						<el-form-item label="主要经营业务" prop="_business" label-width="100px">
							<el-input style="width:98%" v-model="form.business" placeholder="请输入" :disabled=true />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
				</el-row>


				<el-row>
					<el-col :span="8" :offset="1">
						<el-form-item label="联系人" prop="_link_man" label-width="100px">
							<el-input style="width:95%" v-model="form.link_man" placeholder="请输入" />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-form-item label="联系电话" prop="_phone" label-width="100px">
							<el-input style="width:95%" v-model="form.phone" placeholder="请输入" />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :offset="1" :span="19">
						<el-form-item label="联系地址" prop="_link_location" label-width="100px">
							<el-input style="width:98%" v-model="form.link_location" placeholder="请输入" />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="8" :offset="1">
						<el-form-item label="传真" prop="_fax" label-width="100px">
							<el-input style="width:95%" v-model="form.fax" placeholder="请输入" :disabled=true />
							<span style="color: red; font-size: 1.7em; margin-left: 0.15em;">*</span>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-form-item label="Email" prop="_email" label-width="100px">
							<el-input style="width:95%" v-model="form.email" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :offset="10" :span="3">
						<el-button style="width:100%" type="primary" @click.native.prevent="myPerserve">保存修改</el-button>
					</el-col>
				</el-row>

			</el-form>
		</div>
	</div>
</template>

<script>
import { getEnterpriseInfo } from '@/api/enterprise/enterpriseRecord'
import { submitEnterpriseInfo } from '@/api/enterprise/enterpriseRecord'
import store from '@/store'

export default {
	data() {
		const validateName = (rule, value, callback) => {
			const regex = /^[A-Za-z\u4e00-\u9fa5]+$/; // 正则表达式匹配中文和英文字符
			if (!regex.test(this.form.z_name)) {
				callback(new Error('请使用中文及英文字符命名'));
			} else {
				callback();
			}
		}

		const validateOid = (rule, value, callback) => {
			const regex = /^[A-Za-z0-9]{1,9}$/; // 只可输入字母、数字，不超过9位
			if (!regex.test(this.form.organize_id)) {
				callback(new Error('只可输入字母、数字，不超过9位'));
			} else {
				callback();
			}
		}

		const validateZipcode = (rule, value, callback) => {
			const regex = /^[0-9]{6}$/; 	// 只可填写6位数字
			if (!regex.test(this.form.zip_code)) {
				callback(new Error('只可填写6位数字'));
			} else {
				callback();
			}
		}

		const validateRegion = (rule, value, callback) => {
			if (!(this.form.region_value)) {
				callback(new Error('所属地区不能为空'));
			} else {
				if ((this.form.region_value).length < 1) {  // 检查字段是否为空或只包含空格
					callback(new Error('请选择内容'));
				} else {
					callback();
				}
			}
		}

		const validateLinkman = (rule, value, callback) => {
			const regex = /^[\u4e00-\u9fa5]+$/; 	// 只可填写中文
			if (!regex.test(this.form.link_man)) {
				callback(new Error('请填写中文联系人姓名'));
			} else if (this.form.link_man.length > 10) {
            	callback(new Error('联系人能超过10个字符长度'));
        	} else {
				callback();
			}
		}

		const validatePhone = (rule, value, callback) => {
			// 1. 区号 + 电话号码，例如：0755-12345678
			// 2. 手机号码，例如：13812345678
			const regex = /^(0\d{2,3}-\d{7,8}|\d{11})$/; 	// 格式必须符合（区号）+电话号码或者为手机号码
			if (!regex.test(this.form.phone)) {
				callback(new Error('格式必须符合（区号）+电话号码或者为手机号码'));
			} else {
				callback();
			}
		}

		const validateHangye = (rule, value, callback) => {
			if ((this.form.hangye_value).length < 1) {  // 检查字段是否为空或只包含空格
				callback(new Error('请选择内容'));
			} else {
				callback();
			}
		}


		const validateXingzhi = (rule, value, callback) => {
			if ((this.form.xingzhi_value).length < 1) {  // 检查字段是否为空或只包含空格
				callback(new Error('请选择内容'));
			} else {
				callback();
			}
		}

		const validateBusiness = (rule, value, callback) => {
			if (!(this.form.business) || (this.form.business).trim() == '') {  // 检查字段是否为空或只包含空格
				callback(new Error('请填写内容'));
			} else {
				callback();
			}
		}

		const validateLinkloc = (rule, value, callback) => {
			if (!(this.form.link_location) || (this.form.link_location).trim() == '') {  // 检查字段是否为空或只包含空格
				callback(new Error('请填写内容'));
			} else if (this.form.link_location.length > 20) {
            	callback(new Error('联系地址不能超过20个字符长度'));
        	} else {
				callback();
			}
		}


		const validateFax = (rule, value, callback) => {
			const regex = /^0\d{2,3}-\d{7,8}$/; 	// 格式必须符合（区号）+电话
			if (!regex.test(this.form.fax)) {
				callback(new Error('格式必须符合（区号）+电话'));
			} else {
				callback();
			}
		}

		const validateEmail = (rule, value, callback) => {
			if (!value) {
				callback(); // 如果为空，通过验证
			} else if (value.length <= 15) {
				const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
				if (regex.test(value)) {
				callback(); // 符合格式，通过验证
				} else {
				callback(new Error('格式必须符合 xxx@xxx.xxx'));
				}
			} else {
				callback(new Error('字符数不得大于15'));
			}
		}

		return {
			userId: store.getters.userId, // 当前企业的账号ID

			labelPosition: 'right',
			form: {
				z_name: null,
				e_name: null,
				organize_id: null,
				zip_code: null,
				
				region_value: [],
				region_options: [
					{
						value: '昆明市',
						label: '昆明市',
						children: [
							{
							value: '五华区',
							label: '五华区',
							},
							{
							value: '盘龙区',
							label: '盘龙区',
							},
							{
							value: '官渡区',
							label: '官渡区',
							},
							{
							value: '西山区',
							label: '西山区',
							},
						],
					},
					{
						value: '曲靖市',
						label: '曲靖市',
						children: [
							{
							value: '麒麟区',
							label: '麒麟区',
							},
							{
							value: '沾益区',
							label: '沾益区',
							},
							{
							value: '马龙区',
							label: '马龙区',
							},
							{
							value: '宣威市',
							label: '宣威市',
							},
						],
					},
					{
						value: '玉溪市',
						label: '玉溪市',
						children: [
							{
							value: '红塔区',
							label: '红塔区',
							},
							{
							value: '江川区',
							label: '江川区',
							},
							{
							value: '澄江县',
							label: '澄江县',
							},
							{
							value: '华宁县',
							label: '华宁县',
							},
						],
					},
					{
						value: '保山市',
						label: '保山市',
						children: [
							{
							value: '隆阳区',
							label: '隆阳区',
							},
							{
							value: '腾冲市',
							label: '腾冲市',
							},
							{
							value: '施甸县',
							label: '施甸县',
							},
							{
							value: '龙陵县',
							label: '龙陵县',
							},
						],
					},
					{
						value: '昭通市',
						label: '昭通市',
						children: [
							{
							value: '昭阳区',
							label: '昭阳区',
							},
							{
							value: '鲁甸县',
							label: '鲁甸县',
							},
							{
							value: '巧家县',
							label: '巧家县',
							},
							{
							value: '永善县',
							label: '永善县',
							},
						],
					},
					{
						value: '丽江市',
						label: '丽江市',
						children: [
							{
							value: '古城区',
							label: '古城区',
							},
							{
							value: '永胜县',
							label: '永胜县',
							},
							{
							value: '华坪县',
							label: '华坪县',
							},
							{
							value: '玉龙纳西族自治县',
							label: '玉龙纳西族自治县',
							},
							{
							value: '宁蒗彝族自治县',
							label: '宁蒗彝族自治县',
							},
						],
					},
					{
						value: '普洱市',
						label: '普洱市',
						children: [
							{
							value: '思茅区',
							label: '思茅区',
							},
							{
							value: '宁洱哈尼族彝族自治县',
							label: '宁洱哈尼族彝族自治县',
							},
							{
							value: '墨江哈尼族自治县',
							label: '墨江哈尼族自治县',
							},
							{
							value: '景东彝族自治县',
							label: '景东彝族自治县',
							},
						],
					},
					{
						value: '临沧市',
						label: '临沧市',
						children: [
							{
							value: '临翔区',
							label: '临翔区',
							},
							{
							value: '云县',
							label: '云县',
							},
							{
							value: '凤庆县',
							label: '凤庆县',
							},
							{
							value: '永德县',
							label: '永德县',
							},
							{
							value: '镇康县',
							label: '镇康县',
							},
						],
					},
					{
						value: '楚雄彝族自治州',
						label: '楚雄彝族自治州',
						children: [
							{
							value: '楚雄市',
							label: '楚雄市',
							},
							{
							value: '双柏县',
							label: '双柏县',
							},
							{
							value: '牟定县',
							label: '牟定县',
							},
							{
							value: '南华县',
							label: '南华县',
							},
						],
					},
					{
						value: '红河哈尼族彝族自治州',
						label: '红河哈尼族彝族自治州',
						children: [
							{
							value: '蒙自市',
							label: '蒙自市',
							},
							{
							value: '个旧市',
							label: '个旧市',
							},
							{
							value: '开远市',
							label: '开远市',
							},
							{
							value: '弥勒市',
							label: '弥勒市',
							},
						],
					},
					{
						value: '文山壮族苗族自治州',
						label: '文山壮族苗族自治州',
						children: [
							{
							value: '文山市',
							label: '文山市',
							},
							{
							value: '砚山县',
							label: '砚山县',
							},
							{
							value: '西畴县',
							label: '西畴县',
							},
							{
							value: '马关县',
							label: '马关县',
							},
						],
					},
					{
						value: '西双版纳傣族自治州',
						label: '西双版纳傣族自治州',
						children: [
							{
							value: '景洪市',
							label: '景洪市',
							},
							{
							value: '勐海县',
							label: '勐海县',
							},
							{
							value: '勐腊县',
							label: '勐腊县',
							},
						],
					},
					{
						value: '大理白族自治州',
						label: '大理白族自治州',
						children: [
							{
							value: '大理市',
							label: '大理市',
							},
							{
							value: '漾濞彝族自治县',
							label: '漾濞彝族自治县',
							},
							{
							value: '祥云县',
							label: '祥云县',
							},
							{
							value: '宾川县',
							label: '宾川县',
							},
						],
					},
					{
						value: '德宏傣族景颇族自治州',
						label: '德宏傣族景颇族自治州',
						children: [
							{
							value: '瑞丽市',
							label: '瑞丽市',
							},
							{
							value: '潞西市',
							label: '潞西市',
							},
							{
							value: '陇川县',
							label: '陇川县',
							},
							{
							value: '盈江县',
							label: '盈江县',
							},
						],
					},
					{
						value: '怒江傈僳族自治州',
						label: '怒江傈僳族自治州',
						children: [
							{
							value: '泸水市',
							label: '泸水市',
							},
							{
							value: '福贡县',
							label: '福贡县',
							},
							{
							value: '贡山独龙族怒族自治县',
							label: '贡山独龙族怒族自治县',
							},
							{
							value: '兰坪白族普米族自治县',
							label: '兰坪白族普米族自治县',
							},
						],
					},
					{
						value: '迪庆藏族自治州',
						label: '迪庆藏族自治州',
						children: [
							{
							value: '香格里拉市',
							label: '香格里拉市',
							},
							{
							value: '德钦县',
							label: '德钦县',
							},
							{
							value: '维西傈僳族自治县',
							label: '维西傈僳族自治县',
							},
						],
					}
				],

				hangye_value: [],
				hangye_options: [
					{
						value: '住宿和餐饮业',
						label: '住宿和餐饮业',
						children: [{
							value: '酒店',
							label: '酒店',	
							}, {
							value: '餐饮',
							label: '餐饮',
							}
						]
					}, 
					{
						value: '房地产与建筑',
						label: '房地产与建筑',
						children: [{
							value: '地产中介',
							label: '地产中介',	
							}, {
							value: '建材',
							label: '建材',
							}, {
							value: '建筑设计',
							label: '建筑设计',
							}
						]
					}, 
					{
						value: '生活服务',
						label: '生活服务',
						children: [{
							value: '娱乐休闲',
							label: '娱乐休闲',	
							}, {
							value: '美容保健',
							label: '美容保健',
							}, {
							value: '运动健身',
							label: '运动健身',
							}, {
							value: '婚庆摄影',
							label: '婚庆摄影',
							}
						]
					},
					{
						value: '工业',
						label: '工业',
						children: [{
							value: '航空航天与国防',
							label: '航空航天与国防',	
							}, {
							value: '建筑装饰电力设备',
							label: '建筑装饰电力设备',
							}, {
							value: '机械制造',
							label: '机械制造',
							}, {
							value: '环保',
							label: '环保',
							}, {
							value: '商业服务与用品',
							label: '商业服务与用品',
							}, {
							value: '交通运输',
							label: '交通运输',
							}, 
						]
					},
					{
						value: '信息技术',
						label: '信息技术',
						children: [{
							value: '计算机',
							label: '计算机',	
							}, {
							value: '电子',
							label: '电子',
							}, {
							value: '半导体',
							label: '半导体',
							}
						]
					},
					{
						value: '原材料',
						label: '原材料',
						children: [{
							value: '化工有色金属',
							label: '化工有色金属',	
							}, {
							value: '钢铁',
							label: '钢铁',
							}, {
							value: '非金属材料',
							label: '非金属材料',
							}, {
							value: '造纸与包装',
							label: '造纸与包装',
							}
						]
					},
					
					{
						value: '通信服务',
						label: '通信服务',
						children: [{
							value: '电信服务',
							label: '电信服务',	
							}, {
							value: '通信设备及技术服务',
							label: '通信设备及技术服务',
							}, {
							value: '传媒',
							label: '传媒',
							}
						]
					},
					
				],

				xingzhi_value: [],
				xingzhi_options: [
					{
						value: '国有企业',
						label: '国有企业',
						children: [{
							value: '中央国有企业',
							label: '中央国有企业',	
							}, {
							value: '地方国有企业',
							label: '地方国有企业',
							}, {
							value: '军工国有企业',
							label: '军工国有企业',
							}
						]
					}, 
					{
						value: '集体所有制企业',
						label: '集体所有制企业',
						children: [{
							value: '农村集体所有制企业',
							label: '农村集体所有制企业',	
							}, {
							value: '城市集体所有制企业',
							label: '城市集体所有制企业',
							}, {
							value: '集体合作社',
							label: '集体合作社',
							}, {
							value: '医疗卫生集体所有制企业',
							label: '医疗卫生集体所有制企业',
							}
						]
					}, 
					{
						value: '私营企业',
						label: '私营企业',
						children: [{
							value: '个体工商户',
							label: '个体工商户',	
							}, {
							value: '中小企业',
							label: '中小企业',
							}, {
							value: '创业企业',
							label: '创业企业',
							}, {
							value: '互联网企业',
							label: '互联网企业',
							}
						]
					},
				],

				business: null,
				link_man: null,
				phone: null,
				link_location: null,
				fax: null,
				email: null,

				hangye_value1: null,
				xingzhi_value1: null,
				region_value1: null,
			},

			InfoRules: {
				// _z_name: [{ trigger: 'blur', validator: validateName }],
				// _oid: [{ trigger: 'blur', validator: validateOid }],
				// _zip_code: [{ trigger: 'blur', validator: validateZipcode }],
				// _region: [{ trigger: 'blur', validator: validateRegion }],
				// _hangye: [{ trigger: 'blur', validator: validateHangye }],
				// _xingzhi: [{ trigger: 'blur', validator: validateXingzhi }],
				// _business: [{ trigger: 'blur', validator: validateBusiness }],
				_link_man: [{ trigger: 'blur', validator: validateLinkman }],
				_phone: [{ trigger: 'blur', validator: validatePhone }],
				_link_location: [{ trigger: 'blur', validator: validateLinkloc }],
				// _fax: [{ trigger: 'blur', validator: validateFax }],
				_email: [{ trigger: 'blur', validator: validateEmail }],
			},





		}	//return
	},

	created() {
		// 1. 在页面加载时获取数据库数据并填充form字段
		this.getData();
	},

	methods: {
		// onSubmit() {
		// 	alert(this.form.hangye_value)
		// 	// console.log(this.form.z_name)
		// 	this.$message('已提交!')
		// },

		getData() {
			getEnterpriseInfo({"userId": this.userId}).then(response => {
				this.form.z_name = response.data.companyChineseName;
				this.form.e_name = response.data.companyEnglishName;
				this.form.organize_id = response.data.companyInstCode; // 获取companyInstCode
				this.form.zip_code = response.data.companyPostcode;
				if(!response.data.companyLocation) this.form.region_value = null;
				else this.form.region_value = (response.data.companyLocation).split('/');
				if(!response.data.companyIndustry) this.form.hangye_value = null;
				else this.form.hangye_value = (response.data.companyIndustry).split('/');
				if(!response.data.companyNature)this.form.xingzhi_value = null;
				else this.form.xingzhi_value = (response.data.companyNature).split('/');
				this.form.business = response.data.companyBusiness;
				this.form.link_man = response.data.companyContacts;
				this.form.phone = response.data.companyPhone;
				this.form.link_location = response.data.companyAddress;
				this.form.fax = response.data.companyFax;
				this.form.email = response.data.companyEmail;

				// 如果未完成备案，跳转回 企业备案提交 页面
				if(response.data.companyRecordStatus != 4){
					this.$message('请完成企业备案!')
					this.$router.push('/enterprise/enterpriseRecord/enterpriseRecordSubmit');
				}
			})
		},
		// ...
		myPerserve() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.is_Submit = 1;
					
					if(!this.form.region_value) this.region_value1 = null;
					else this.region_value1 = this.form.region_value.join('/');
					if(!this.form.hangye_value) this.hangye_value1 = null;
					else this.hangye_value1 = this.form.hangye_value.join('/');
					if(!this.form.xingzhi_value) this.xingzhi_value1 = null;
					else this.xingzhi_value1 = this.form.xingzhi_value.join('/');
					
					submitEnterpriseInfo({
						userId: this.userId,
						companyChineseName: this.form.z_name,
						companyEnglishName:this.form.e_name,
						companyInstCode:this.form.organize_id, // 获取companyInstCode
						companyPostcode:this.form.zip_code,
						companyLocation:this.region_value1,
						companyIndustry:this.hangye_value1,
						companyNature:this.xingzhi_value1,
						companyBusiness:this.form.business,
						companyContacts:this.form.link_man,
						companyPhone:this.form.phone,
						companyAddress:this.form.link_location,
						companyFax:this.form.fax,
						companyEmail:this.form.email,
						is_Submit:false
					}
					).then(response => {
						this.$message('已保存!')
					})
				}
			})
		},

		onCancel() {
			this.$message({
				message: 'cancel!',
				type: 'warning'
			})
		}
	}
}
</script>